<template>
  <el-container>
    <el-header><Header /></el-header>
    <el-main>
      <div class="content">
        <div class="title">{{ paperName }}</div>
        <div class="question">
          <div v-for="(item, i) in testItemList" :key="i" class="question_item">
            <div class="question_title"><span>{{ i+1 + '、' }}</span>{{ item.title }}</div>
            <el-radio-group v-if="item.type === 'radio'" v-model="item.score" class="options" @change="handleChange(item)">
              <el-radio
                v-for="(type, j) in item.textList"
                :key="j"
                :label="item.scoreList[j]"
                :value="item.scoreList[j]"
              >
                <span class="type">{{ type }}</span>
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="btn">
          <el-button type="primary" @click="sumScore">提交</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Header from '../header/index.vue'
import { findTestItemList, doTest } from '@/api/test'
import Swal from 'sweetalert2'
export default {
  components: { Header },
  data() {
    return {
      paperName: '',
      testItemList: [],
      testScoreSegment: [],
      submitTimes: 0
    }
  },
  mounted() {
    this.getTestItemList()
  },
  methods: {
    getTestItemList() {
      findTestItemList({ id: this.$route.params.id }).then(res => {
        this.testItemList = res.data.textList
        this.paperName = res.data.paperName
        this.testScoreSegment = res.data.resultList
        console.log(this.testScoreSegment)
      })
    },
    handleChange(item) {
      console.log(item)
    },
    sumScore() {
      var sum = Number(0)
      for (var i = 0; i < this.testItemList.length; i++) {
        if (this.testItemList[i].score === null) {
          Swal.fire({
            title: '还有遗漏的问题没有答完!',
            icon: 'warning',
            confirmButtonText: '回去作答',
            heightAuto: false
          })
          return
        }
        sum += this.testItemList[i].score
      }
      this.submitTimes += 1
      if (this.submitTimes !== 1) {
        Swal.fire({
          title: '不可重复提交',
          icon: 'warning',
          confirmButtonText: '确定',
          heightAuto: false
        }).then(res => {
          if (res.isConfirmed) {
            this.$router.push('/index')
          }
        })
        return
      }
      doTest({ userId: this.$store.getters.user_id, testId: this.$route.params.id, score: sum }).then(res => {
        if (res.code === 1) {
          var result = ''
          for (var i = 0; i < this.testScoreSegment.length; i++) {
            if (sum >= this.testScoreSegment[i].resultScore[0] && sum < this.testScoreSegment[i].resultScore[1]) {
              result = this.testScoreSegment[i].result
            }
          }
          Swal.fire({
            title: '测试结果',
            icon: 'success',
            text: result,
            confirmButtonText: 'OK',
            heightAuto: false
          }).then(res => {
            if (res.isConfirmed) {
              this.$router.push('/index')
            }
          })
        }
      })
      console.log(sum)
    }
  }
}
</script>

<style lang= "scss" scoped>
.el-header{
  padding: 0;
}
.el-main{
  padding: 20px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.content {
  width: 60%;
}
.title {
  text-align: center;
  font-weight: 700;
  font-size: 30px;
}
.question {
  background: #F2F6FC;
  border-radius: 10px;
}
.question_item{
  padding: 10px;
}
.options{
  padding: 20px;
}
.question_title{
  font-size: 20px;
}
.type{
  font-size: 16px;
  font-weight: 700;
}
.btn {
  margin-top: 20px;
  .el-button{
    width: 200px;
  }
}
</style>
